<template>
  <div class="search">
    <Card>
      <Row class="code-row-bg" justify="space-between" type="flex">
        <Col v-if="expand" span="5">
        <Row class="operation">
          <Button icon="md-add" type="primary" @click="addDict">添加字典</Button>
          <Dropdown trigger="click" @on-click="handleDropdown">
            <Button>
              更多操作
              <Icon type="md-arrow-dropdown"/>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="editDict">编辑字典</DropdownItem>
              <DropdownItem name="delDict">删除字典</DropdownItem>
              <DropdownItem name="refreshDict">刷新</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Row>
        <Alert show-icon>
          当前选择：
          <span class="select-title">{{ editTitle }}</span>
          <a v-if="editTitle" class="select-clear" @click="cancelEdit">取消选择</a>
        </Alert>
        <div class="tree-bar">
          <Tree ref="tree" :data="treeData" @on-select-change="selectTree"></Tree>
        </div>
        <Spin v-if="treeLoading" fix size="large"></Spin>
        </Col>
        <div class="expand">
          <Icon :type="expandIcon" class="icon" size="16" @click="changeExpand"/>
        </div>
        <Col :span="span">
        <Row class="operation">
          <Button icon="md-add" type="primary" @click="add">添加数据</Button>
          <Button icon="md-trash" @click="delAll">批量删除</Button>
          <Button icon="md-refresh" @click="getDataList">刷新数据</Button>
          <circleLoading v-if="operationLoading"/>
        </Row>
        <Row>
          <Alert show-icon>
            已选择
            <span class="select-count">{{ selectCount }}</span> 项
            <a class="select-clear" @click="clearSelectAll">清空</a>
          </Alert>
        </Row>
        <Row>
          <Table
            ref="table"
            :columns="columns"
            :data="nowData"
            :loading="loading"
            size="small"
            sortable="custom"
            @on-selection-change="showSelect"
            @on-sort-change="changeSort"
          ></Table>
        </Row>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="pageCurrent"
            :page-size="pageSize"
            :total="dataCount"
            show-sizer
            show-total
            @on-change="changePage"
            @on-page-size-change="_nowPageSize"
          />
        </Row>
        </Col>
      </Row>
    </Card>

    <Modal
      v-model="dictModalVisible"
      :mask-closable="false"
      :styles="{top: '100px'}"
      :title="dictModalTitle"
      :width="500"
    >
      <Form ref="dictForm" :label-width="70" :model="dictForm" :rules="dictFormValidate">
        <FormItem label="字典名称" prop="title">
          <Input v-model="dictForm.title" placeholder/>
        </FormItem>
        <FormItem label="字典类型" prop="type">
          <!--<Tooltip placement="right" content="建议使用唯一的英文名，非开发人员请谨填写" class="form-tooltip">-->
          <Input v-model="dictForm.type" placeholder="建议使用唯一的英文名称，非开发人员请谨填写"/>
          <!--</Tooltip>-->
        </FormItem>
        <FormItem label="备注" prop="description">
          <Input
            v-model="dictForm.description"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="输入内容"
            type="textarea"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="dictModalVisible=false">取消</Button>
        <Button :loading="submitLoading" type="primary" @click="handelSubmitDict">提交</Button>
      </div>
    </Modal>
    <Modal
      v-model="modalVisible"
      :mask-closable="false"
      :styles="{top: '100px'}"
      :title="modalTitle"
      :width="500"
    >
      <Form ref="form" :label-width="70" :model="form" :rules="formValidate">
        <FormItem label="名称" prop="title">
          <Input v-model="form.title" placeholder/>
        </FormItem>
        <FormItem label="数据值" prop="value">
          <Input v-model="form.value" placeholder/>
        </FormItem>
        <FormItem label="备注" prop="description">
          <Input v-model="form.description" placeholder/>
        </FormItem>
        <FormItem label="排序值" prop="sort">
          <InputNumber v-model="form.sort" :max="1000" :min="0"></InputNumber>
          <span style="margin-left:5px">数值越小越靠前</span>
        </FormItem>
        <FormItem label="是否启用" prop="status">
          <i-switch v-model="form.status" :false-value="0" :true-value="1" size="large">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button :loading="submitLoading" type="primary" @click="handelSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  addDict,
  addDictData,
  deleteDict,
  deleteDictData,
  editDict,
  editDictData,
  getAllDictDataList,
  getAllDictList
} from 'api/system'
import './dictManage.css'

export default {
  name: 'DictManage',
  data() {
    return {
      //分页
      pageSize: 10, //每页显示多少条
      dataCount: 0, //总条数
      pageCurrent: 1, //当前页
      nowData: [],
      treeData: [],
      loading: false,
      treeLoading: false,
      submitLoading: false,
      operationLoading: false, // 操作加载状态
      modalType: 0, // 添加或编辑标识
      dictModalTitle: '',
      dictModalVisible: false,
      modalVisible: false,
      modalTitle: '',
      editTitle: '', // 编辑节点名称
      dictForm: {
        title: '',
        type: '',
        description: ''
      },
      form: {
        // 添加或编辑表单对象初始化数据
        title: '',
        status: 1,
        description: '',
        sort: 0,
        value: ''
      },
      dictFormValidate: {
        // 表单验证规则
        title: [{required: true, message: '不能为空', trigger: 'blur'}],
        type: [{required: true, message: '不能为空', trigger: 'blur'}]
      },
      formValidate: {
        // 表单验证规则
        title: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        value: [{required: true, message: '数据值不能为空', trigger: 'blur'}]
      },
      selectNode: {},
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        // 搜索框对应data对象
        // name: "",
        // status: "",
        // pageNumber: 1,  // 当前页数
        // pageSize: 10,   // 页面大小
        // sort: "sort",   // 默认排序字段
        // order: "asc"    // 默认排序方式
      },
      expand: true,
      span: 18,
      expandIcon: 'ios-arrow-back',
      columns: [
        // 表头
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '名称',
          key: 'title',
          width: 150,
          sortable: true,
          fixed: 'left'
        },
        {
          title: '数据值',
          key: 'value',
          width: 150,
          sortable: true,
          fixed: 'left'
        },
        {
          title: '备注',
          key: 'description',
          width: 150,
          sortable: true
        },
        {
          title: '排序值',
          key: 'sort',
          width: 100,
          sortable: true,
          sortType: 'asc'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 130,
          render: (h, params) => {
            const re = ''
            if (params.row.status === 1) {
              return h('div', [
                h(
                  'Tag',
                  {
                    props: {
                      color: 'green'
                    }
                  },
                  '正常启用'
                )
              ])
            } else if (params.row.status === 0) {
              return h('div', [
                h(
                  'Tag',
                  {
                    props: {
                      color: 'red'
                    }
                  },
                  '禁用'
                )
              ])
            }
          }
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 250,
          sortable: true
        },
        {
          title: '操作',
          key: 'action',
          width: 160,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data: [] //表单数据
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    _nowPageSize(index) {
      //实时获取当前需要显示的条数
      this.pageSize = index
      this.loadingTable = true
      this.nowData = []
      for (let i = 0; i < this.pageSize; i++) {
        if (this.data[i]) {
          this.nowData.push(this.data[i])
        }
      }
      this.pageCurrent = 1
      this.loadingTable = false
    },
    add() {
      if (!this.selectNode.id) {
        this.$Message.warning('请先选择一个字典类别')
        return
      }
      this.modalType = 0
      this.modalTitle = '添加字典 ' + this.editTitle + ' 的数据'
      this.$refs.form.resetFields()
      this.modalVisible = true
    },
    addDict() {
      this.modalType = 0
      this.dictModalTitle = '添加字典'
      this.$refs.dictForm.resetFields()
      this.dictModalVisible = true
    },
    cancelEdit() {
      const data = this.$refs.tree.getSelectedNodes()[0]
      if (data) {
        data.selected = false
      }
      // 取消选择后获取全部数据
      this.selectNode = {}
      this.editTitle = ''
      this.getDataList()
    },
    changeExpand() {
      this.expand = !this.expand
      if (this.expand) {
        this.expandIcon = 'ios-arrow-back'
        this.span = 18
      } else {
        this.expandIcon = 'ios-arrow-forward'
        this.span = 23
      }
    },
    changePage(index) {
      //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      const _start = (index - 1) * this.pageSize
      //需要显示结束数据的index
      const _end = index * this.pageSize
      //截取需要显示的数据
      this.nowData = this.data.slice(_start, _end)
      //储存当前页
      this.pageCurrent = index
    },
    changeSort(e) {
      this.searchForm.sort = e.key
      this.searchForm.order = e.order
      if (e.order === 'normal') {
        this.searchForm.order = ''
      }
      this.getDataList()
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          deleteDictData(ids).then(res => {
            this.$Modal.remove()
            if (res.result === true) {
              this.$Message.success('操作成功')
              this.clearSelectAll()
              this.getDataList()
            }
          })
        }
      })
    },
    delDict() {
      if (!this.selectNode.id) {
        this.$Message.warning('您还未选择要删除的字典!')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除【' + this.selectNode.title + '】？',
        onOk: () => {
          // 删除
          deleteDict(this.selectNode.id).then(res => {
            this.$Modal.remove()
            if (res.result === true) {
              this.$Message.success('删除成功')
              this.refreshDict()
            }
          })
        }
      })
    },
    edit(v) {
      this.modalType = 1
      this.modalTitle = '编辑字典 ' + this.editTitle + ' 的数据'
      this.$refs.form.resetFields()
      // 转换null为""
      for (const attr in v) {
        if (v[attr] === null) {
          v[attr] = ''
        }
      }
      const str = JSON.stringify(v)
      this.form = JSON.parse(str)
      this.modalVisible = true
    },
    editDict() {
      this.modalType = 1
      this.dictModalTitle = '编辑字典'
      this.dictModalVisible = true
    },
    getAllDict() {
      this.treeLoading = true
      getAllDictList().then(res => {
        this.treeData = res.result
        this.treeLoading = false
      })
    },
    getDataList() {
      this.loading = true
      if (this.selectNode.id) {
        this.searchForm.dict_id = this.selectNode.id
      } else {
        delete this.searchForm.dict_id
      }
      getAllDictDataList(this.searchForm).then(res => {
        this.loading = false
        if (res.result) {
          this.data = res.result
          //分页显示所有数据总数
          this.dataCount = this.data.length
          //循环展示页面刚加载时需要的数据条数
          this.nowData = []
          for (let i = 0; i < this.pageSize; i++) {
            if (this.data[i]) {
              this.nowData.push(this.data[i])
            }
          }
        }
        this.pageCurrent = 1
      })
    },
    handelSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.modalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.form.id
            this.form.dict_id = this.selectNode.id
            addDictData(this.form).then(res => {
              this.submitLoading = false
              if (res.result === true) {
                this.$Message.success('添加成功')
                this.modalVisible = false
                this.getDataList()
              }
            })
          } else if (this.modalType === 1) {
            // 编辑
            editDictData(this.form).then(res => {
              this.submitLoading = false
              if (res.result === true) {
                this.$Message.success('修改成功')
                this.modalVisible = false
                this.getDataList()
              }
            })
          }
        }
      })
    },
    handelSubmitDict() {
      this.$refs.dictForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.modalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.dictForm.id
            addDict(this.dictForm).then(res => {
              this.submitLoading = false
              if (res.result === true) {
                this.$Message.success('添加成功')
                this.dictModalVisible = false
                this.getAllDict()
              }
            })
          } else if (this.modalType === 1) {
            // 编辑
            editDict(this.dictForm).then(res => {
              this.submitLoading = false
              if (res.result === true) {
                this.$Message.success('修改成功')
                this.dictModalVisible = false
                this.getAllDict()
              }
            })
          }
        }
      })
    },
    handleDropdown(name) {
      if (name === 'editDict') {
        if (!this.selectNode.id) {
          this.$Message.warning('您还未选择要编辑的字典')
          return
        }
        this.editDict()
      } else if (name === 'delDict') {
        this.delDict()
      } else if (name === 'refreshDict') {
        this.refreshDict()
      }
    },
    init() {
      // 获取树数据
      this.getAllDict()
      // 获取表单数据
      this.getDataList()
    },
    refreshDict() {
      this.getAllDict()
      this.selectNode = {}
      this.editTitle = ''
      this.getDataList()
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除【' + v.title + '】？',
        onOk: () => {
          // 删除
          deleteDictData(v.id).then(res => {
            this.$Modal.remove()
            if (res.result === true) {
              this.$Message.success('删除成功')
              this.getDataList()
            }
          })
        }
      })
    },
    selectTree(v) {
      if (v.length > 0) {
        // 转换null为""
        for (const attr in v[0]) {
          if (v[0][attr] === null) {
            v[0][attr] = ''
          }
        }
        const str = JSON.stringify(v[0])
        const data = JSON.parse(str)
        this.selectNode = data
        this.dictForm = data
        this.editTitle = data.title + '(' + data.type + ')'
        // 重新加载表
        // this.searchForm.pageNumber = 1;
        // this.searchForm.pageSize = 10;
        this.getDataList()
      } else {
        this.cancelEdit()
      }
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    }
  }
}
</script>
